<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const selectedKeys = ref(['1'])

const toPath = (path) => {
   router.push({ path: path })
}

</script>

<template>
    <a-layout has-sider :style="{ height: '100%' }" >
    <a-layout-sider
      :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: 0, bottom: 0 }"
    >
      <div class="logo" />
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
        <a-menu-item key="1" @click="toPath('/sysIndex')">
          <span class="nav-text">试卷管理</span>
        </a-menu-item>
        <a-menu-item key="2" @click="toPath('/sysPractice')">
          <span class="nav-text">试卷练习管理</span>
        </a-menu-item>
        <a-menu-item key="3" @click="toPath('/userPractice')">
          <span class="nav-text">试卷练习普通</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout :style="{ marginLeft: '200px' }">
      <a-layout-header :style="{ background: '#fff', padding: 0 }">
        
      </a-layout-header>
      <a-layout-content :style="{ margin: '24px 16px', overflow: 'initial' }">
        <div :style="{ padding: '24px', background: '#fff', height: '100%' }">
          <router-view></router-view>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
 
</template>

<style lang="less" scoped>
.logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
.site-layout .site-layout-background {
  background: #fff;
}
[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}
</style>
